<template>
  <div class="com-head">
    <div class="aciton-btn-box" v-if="btnList && btnList.length > 0">
      <div
        class="item-btn"
        :class="{ 'active-item': currentBtn == item.name }"
        v-for="item in btnList"
        :key="item.name"
        @click="handleClick(item)"
      >
        <!-- <img :src="item.img" alt="" class="logo" /> -->
        <span>{{ item.name }}</span>
      </div>
      <div class="user-info-box">
        <!-- <img class="photo" src="@/assets/images/user.png" alt="" /> -->
        <span class="name">徐婷婷</span>
        <!-- <img class="arrow" src="@/assets/images/downarrow.png" alt="" /> -->
      </div>
    </div>
    <div class="navigation-box">
      <div class="navigation">
        <!-- <img class="left" src="@/assets/images/left-arrow.png" alt="" /> -->
        <el-breadcrumb separator="/" class="breadcrumb">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>财务管理</el-breadcrumb-item>
          <el-breadcrumb-item>用户的账户设置</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- <img class="right" src="@/assets/images/right-arrow.png" alt="" /> -->
      </div>
      <div class="tags-box">
        <div
          class="tag"
          :class="{ 'active-tag': currentTag == tag.name }"
          v-for="tag in tags"
          :key="tag.id"
        >
          <div class="spec-box" v-if="tag.spec">
            <span class="dot"></span>
            <span class="name">{{ tag.name }}</span>
            <!-- <img src="@/assets/images/close.png" alt=""> -->
          </div>
          <span v-else>{{ tag.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      currentBtn: "全屏",
      currentTag: "首页",
      btnList: [
        // { name: "搜索", img: require("@/assets/images/search.png") },
        // { name: "全屏", img: require("@/assets/images/screen.png") }
      ],
      tags: [
        { id: 1, name: "用户账户" },
        { id: 2, name: "首页", spec: true },
      ],
    };
  },
  created() {},
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    handleClick(item) {
      this.currentBtn = item.name;
    },
  },
};
</script>
<style lang="scss" scoped>
.com-head {
  .aciton-btn-box {
    padding-right: 30px;
    height: 52px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: end;
    .item-btn {
      display: flex;
      align-items: center;
      font-size: 18px;
      color: #a1a1a1;
      margin-right: 30px;
      font-weight: 500;
      cursor: pointer;
      .logo {
        width: 32px;
        height: 32px;
        margin-right: 5px;
      }
    }
    .active-item {
      color: #3875f6;
    }
    .user-info-box {
      display: flex;
      align-items: center;
      .photo {
        width: 32px;
        height: 32px;
      }
      .name {
        font-size: 18px;
        color: #a1a1a1;
        font-weight: 500;
        margin: 0 5px;
      }
      .arrow {
        width: 15px;
        height: 8px;
      }
    }
  }
  .navigation-box {
    margin-top: 5px;
    background: #fff;
    padding: 0 30px;
    .navigation {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e9e9e9;
      padding: 30px 0;
      .breadcrumb {
        margin: 0 30px;
        font-size: 25px;
        font-weight: 500;
        color: #333;
      }
    }
    .tags-box {
      display: flex;
      padding: 10px 0;
      .tag {
        display: flex;
        align-items: center;
        margin-right: 30px;
        color: #666666;
        font-size: 18px;
        background: #ffffff;
        border: 1px solid #f4f4f4;
        border-radius: 5px;
        padding: 3px 8px;
        cursor: pointer;
      }
      .active-tag {
        background: #3875f6;
        color: #fff;
      }
      .spec-box {
        display: flex;
        align-items: center;
        cursor: pointer;
        .dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #fff;
        }
        .name {
          margin: 0 10px;
        }
      }
    }
  }
}
</style>
